:root{

--blue:#56CCF2;
--yellow:#FFD93D;
--green:#6FCF97;
--orange:#FFB84C;
--pink:#FF8FB1;
--dark:#274060;
--white:#ffffff;
--bg:#F8FCFF;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:#333;

overflow-x:hidden;

}

/* Floating Background */

body::before{

content:"";

position:fixed;

width:300px;
height:300px;

background:#b3ecff;

border-radius:50%;

top:-120px;
left:-120px;

opacity:.35;

filter:blur(60px);

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:350px;
height:350px;

background:#fff1b5;

border-radius:50%;

bottom:-150px;
right:-100px;

opacity:.4;

filter:blur(70px);

z-index:-2;

}

/* =====================================================
   KING'S GARDEN PLAYFUL NAVBAR
===================================================== */

.kg-navbar {

    position: fixed;
    
    position: -webkit-sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background: transparent;

    backdrop-filter: blur(14px);

    border-bottom:
        3px solid #f4f4f4;

    box-shadow:
        0 5px 20px rgba(60,60,80,.08);

    transition: all 0.3s ease;    

}


/* ==========================================
   CONTAINER
========================================== */

.kg-nav-container {

    width: min(
        1450px,
        calc(100% - 50px)
    );

    min-height: 78px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* ==========================================
   BRAND
========================================== */

.kg-brand {

    display: flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    position: relative;

    transition:
        transform .25s ease;

}


.kg-brand:hover {

    transform:
        translateY(-2px)
        rotate(-1deg);

}


/* ==========================================
   LOGO BUBBLE
========================================== */

.kg-logo-bubble {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            135deg,
            #fff1a8,
            #ffd45c
        );

    box-shadow:

        0 5px 0 #f2bd32,

        0 8px 15px
        rgba(255,190,50,.25);

    transform:
        rotate(-5deg);

}


.kg-logo-emoji {

    font-size: 29px;

    line-height: 1;

}


/* ==========================================
   BRAND TEXT
========================================== */

.kg-brand-text {

    font-family:
        "Fredoka",
        "Comic Sans MS",
        sans-serif;

    font-size: 24px;

    font-weight: 800;

    color: #27a9e1;

    letter-spacing: -.5px;

}


.kg-brand-text span {

    color: #ffad42;

}


/* ==========================================
   NAVIGATION
========================================== */

.kg-navigation {

    display: flex;

    align-items: center;

    gap: 5px;

}


/* ==========================================
   NAV LINKS
========================================== */

.kg-nav-link {

    position: relative;

    display: flex;

    align-items: center;

    gap: 5px;

    padding:
        10px 12px;

    border-radius: 15px;

    text-decoration: none;

    color: #34363b;

    font-family:
        "Fredoka",
        "Comic Sans MS",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    transition:
        all .25s ease;

}


.kg-nav-link span {

    font-size: 15px;

    transition:
        transform .25s ease;

}


.kg-nav-link:hover {

    color: #ff5b68;

    background: #fff3f3;

    transform:
        translateY(-3px);

}


.kg-nav-link:hover span {

    transform:
        scale(1.25)
        rotate(-8deg);

}


/* ==========================================
   LITTLE PLAYFUL DOT
========================================== */

.kg-nav-link::after {

    content: "";

    position: absolute;

    width: 5px;

    height: 5px;

    background: #ffd34d;

    border-radius: 50%;

    bottom: 4px;

    left: 50%;

    transform:
        translateX(-50%)
        scale(0);

    transition:
        transform .2s ease;

}


.kg-nav-link:hover::after {

    transform:
        translateX(-50%)
        scale(1);

}
/* ==========================================
   NOTIFICATION BUTTON
========================================== */

.kg-notification-btn {

    position: relative;

    margin-left: 8px;

    padding: 12px 18px;

    border: none;

    border-radius: 30px;

    display: flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

    color: #ffffff;

    font-family:
        "Fredoka",
        "Comic Sans MS",
        sans-serif;

    font-size: 14px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #27a9e1,
            #7b72ff
        );

    box-shadow:
        0 5px 0 #5850c9,

        0 8px 18px
        rgba(80,80,220,.20);

    transition:
        all .2s ease;

}


/* HOVER */

.kg-notification-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 0 #5850c9,

        0 12px 25px
        rgba(80,80,220,.25);

}


/* CLICK */

.kg-notification-btn:active {

    transform:
        translateY(2px);

    box-shadow:
        0 2px 0 #5850c9;

}


/* BELL */

.kg-notification-btn > span:first-child {

    font-size: 16px;

}


/* RED NOTIFICATION DOT */

.kg-notification-dot {

    position: absolute;

    top: 7px;

    right: 9px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #ff4757;

    border: 2px solid white;

    animation:
        notificationPulse 1.8s infinite;

}


@keyframes notificationPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.35);

    }

    100% {

        transform: scale(1);

    }

}


/* ==========================================
   MOBILE BUTTON
========================================== */

.kg-menu-toggle {

    display: none;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 14px;

    background: #fff2f2;

    cursor: pointer;

    padding: 10px;

}


.kg-menu-toggle span {

    display: block;

    height: 3px;

    margin: 5px 0;

    border-radius: 10px;

    background: #ff6572;

    transition:
        .25s ease;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 950px) {

    .kg-nav-container {

        min-height: 70px;

        width:
            calc(100% - 30px);

    }


    .kg-menu-toggle {

        display: block;

    }


    .kg-navigation {

        position: absolute;

        top: 73px;

        left: 15px;

        right: 15px;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 5px;

        padding: 15px;

        background: white;

        border-radius: 22px;

        box-shadow:
            0 20px 45px
            rgba(40,40,70,.15);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            .25s ease;

    }


    .kg-navigation.active {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .kg-nav-link {

        padding: 13px 15px;

        font-size: 15px;

    }


    .kg-donate-btn {

        margin-left: 0;

        justify-content: center;

        margin-top: 5px;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width: 500px) {

    .kg-brand-text {

        font-size: 20px;

    }


    .kg-logo-bubble {

        width: 42px;

        height: 42px;

    }


    .kg-logo-emoji {

        font-size: 25px;

    }

}
/* ==========================================
   NAV ACTIONS
========================================== */

.kg-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ==========================================
   UPDATES BUTTON
========================================== */

.kg-updates-btn {
    position: relative;

    border: none;

    padding: 12px 18px;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #27a9e1,
        #7c72ff
    );

    color: white;

    font-family: "Fredoka", sans-serif;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 4px 0 #5850c9;

    transition: 0.2s ease;
}

.kg-updates-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 7px 0 #5850c9;
}

.kg-updates-btn:active {
    transform: translateY(2px);

    box-shadow:
        0 2px 0 #5850c9;
}


/* RED DOT */

.kg-updates-btn::after {
    content: "";

    position: absolute;

    top: 5px;

    right: 7px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #ff4757;

    border: 2px solid white;
}



/* ==========================================
   DONATE BUTTON
========================================== */

.kg-donate-btn {

    margin-left: 10px;

    padding:
        12px 20px;

    border-radius: 30px;

    display: flex;

    align-items: center;

    gap: 7px;

    text-decoration: none;

    color: white;

    font-family:
        "Fredoka",
        "Comic Sans MS",
        sans-serif;

    font-size: 14px;

    font-weight: 800;

    background:

        linear-gradient(
            135deg,
            #ff6b78,
            #ffb347
        );

    box-shadow:

        0 5px 0 #e85c67,

        0 8px 18px
        rgba(255,100,110,.25);

    transition:
        all .2s ease;

}


.kg-donate-btn:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 8px 0 #e85c67,

        0 12px 25px
        rgba(255,100,110,.3);

}


.kg-donate-btn:active {

    transform:
        translateY(2px);

    box-shadow:

        0 2px 0 #e85c67;

}

/* ==========================================
   POPUP
========================================== */

.kg-update-panel {

    position: fixed;

    top: 90px;

    right: 30px;

    width: 390px;

    max-width: calc(100% - 30px);

    max-height: calc(100vh - 110px);

    overflow-y: auto;

    padding: 22px;

    background: #fffaf2;

    border-radius: 25px;

    z-index: 999999;

    box-shadow:
        0 20px 60px rgba(0,0,0,.20);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-15px)
        scale(.95);

    transition:
        .25s ease;
}


/* IMPORTANT */

.kg-update-panel.show {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* ==========================================
   HEADER
========================================== */

.kg-update-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 15px;
}

.kg-update-header small {

    color: #27a9e1;

    font-weight: 800;

    font-size: 10px;

    letter-spacing: 1px;
}

.kg-update-header h2 {

    margin: 3px 0 0;

    font-family: "Fredoka", sans-serif;

    font-size: 26px;
}

#kgCloseUpdates {

    width: 35px;

    height: 35px;

    border: none;

    border-radius: 50%;

    background: #ffe7ea;

    color: #ff4757;

    font-size: 22px;

    cursor: pointer;
}


/* ==========================================
   UPDATE ITEMS
========================================== */

.kg-update-item {

    display: flex;

    gap: 12px;

    padding: 14px;

    border-radius: 17px;

    margin-bottom: 10px;
}

.kg-update-item.weather {
    background: #eaf8ff;
}

.kg-update-item.project {
    background: #eafff1;
}

.kg-update-item.motivation {
    background: #fff5cf;
}

.kg-update-item.date {
    background: #fff0e5;
}


/* ICON */

.kg-update-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    background: white;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;
}


/* TEXT */

.kg-update-item small {

    font-size: 9px;

    font-weight: 800;

    color: #777;

    letter-spacing: .8px;
}

.kg-update-item h3 {

    margin: 3px 0;

    font-family: "Fredoka", sans-serif;

    font-size: 16px;
}

.kg-update-item p {

    margin: 3px 0;

    color: #667085;

    font-size: 12px;

    line-height: 1.4;
}

.kg-update-item a {

    color: #ff5364;

    font-weight: 700;

    font-size: 12px;

    text-decoration: none;
}

/* ==========================================
   INFORMATION CARD
========================================== */

.kg-update-item.information {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 15px;

    margin-bottom: 10px;

    border-radius: 18px;

    background: #f1eaff;

    box-sizing: border-box;

    width: 100%;
}


/* ==========================================
   ICON
========================================== */

.kg-update-item.information
.kg-update-icon {

    width: 42px;

    height: 42px;

    min-width: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    border-radius: 13px;

    font-size: 21px;

}


/* ==========================================
   CONTENT
========================================== */

.kg-update-content {

    min-width: 0;

    flex: 1;

}


.kg-update-content small {

    display: block;

    font-size: 9px;

    font-weight: 800;

    color: #777;

    letter-spacing: .8px;

}


.kg-update-content h3 {

    margin: 3px 0;

    font-family: "Fredoka", sans-serif;

    font-size: 16px;

    line-height: 1.2;

    color: #34363b;

}


.kg-update-content p {

    margin: 4px 0;

    color: #667085;

    font-size: 12px;

    line-height: 1.4;

}


.kg-update-content a {

    display: inline-block;

    margin-top: 6px;

    padding: 7px 10px;

    border-radius: 10px;

    background: #7b72ff;

    color: white;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;

}


.kg-update-content a:hover {

    transform: translateY(-2px);

    background: #6258e8;

}

.kg-learn-adoption {

    margin-top: 10px;

    padding: 8px 12px;

    border-radius: 12px;

    background: #ff6572;

    color: white;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: .2s ease;

}

/* ================================
   ADOPTION MODAL
================================ */

.adoption-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    inset: 0;
    width: 100%;
    height: 100%;

    background: rgba(30, 35, 50, 0.65);

    align-items: center;
    justify-content: center;

    padding: 20px;
    box-sizing: border-box;
}

.adoption-modal.show {
    display: flex;
}

.adoption-modal-content {
    position: relative;

    width: 100%;
    max-width: 650px;
    max-height: 90vh;

    overflow-y: auto;

    background: #fffaf2;
    border-radius: 28px;

    padding: 28px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

    animation: adoptionModalIn 0.25s ease;
}

@keyframes adoptionModalIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Close button */

.adoption-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;
    border-radius: 50%;

    background: #ffe1e8;
    color: #ff5368;

    font-size: 25px;
    font-weight: bold;

    cursor: pointer;
}

.adoption-close:hover {
    background: #ff5368;
    color: white;
}

/* Header */

.adoption-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 15px;

    padding-right: 45px;
}

.adoption-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    border-radius: 16px;

    font-size: 25px;
}

.adoption-modal-header span {
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    color: #777;
}

.adoption-modal-header h2 {
    margin: 3px 0 0;

    font-size: 25px;

    color: #333;
}

/* Introduction */

.adoption-intro {
    color: #667085;

    font-size: 14px;
    line-height: 1.6;

    margin-bottom: 22px;
}

/* Steps */

.adoption-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.adoption-step {
    display: flex;
    gap: 14px;

    padding: 15px;

    background: white;

    border-radius: 18px;

    border: 1px solid #eee;

    transition: 0.2s ease;
}

.adoption-step:hover {
    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.07);
}

.step-number {
    flex-shrink: 0;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffe55b;

    color: #333;

    font-weight: 900;
}

.adoption-step h3 {
    margin: 0 0 4px;

    font-size: 16px;

    color: #333;
}

.adoption-step p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;
}

/* NACC box */

.nacc-box {
    display: flex;
    gap: 14px;

    margin-top: 22px;
    padding: 18px;

    background: #e9e1ff;

    border-radius: 18px;
}

.nacc-logo {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;

    border-radius: 13px;

    font-size: 22px;
}

.nacc-box strong {
    display: block;

    margin-bottom: 5px;

    color: #333;
}

.nacc-box p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.5;
}

/* NACC button */

.nacc-button {
    display: block;

    margin-top: 15px;

    padding: 13px 18px;

    text-align: center;

    text-decoration: none;

    background: #ff6074;

    color: white;

    border-radius: 14px;

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 4px 0 #d94358;

    transition: 0.15s ease;
}

.nacc-button:hover {
    transform: translateY(2px);

    box-shadow:
        0 2px 0 #d94358;
}

/* Note */

.adoption-note {
    margin: 15px 5px 0;

    text-align: center;

    color: #8a8a8a;

    font-size: 11px;

    line-height: 1.5;
}

/* Mobile */

@media (max-width: 600px) {

    .adoption-modal {
        padding: 10px;
    }

    .adoption-modal-content {
        max-height: 94vh;

        padding: 22px 18px;

        border-radius: 23px;
    }

    .adoption-modal-header h2 {
        font-size: 21px;
    }

    .adoption-step {
        padding: 13px;
    }

    .adoption-step h3 {
        font-size: 15px;
    }

    .adoption-step p {
        font-size: 12px;
    }
}

/* =========================================
   KING'S GARDEN DONATION BOOKING
========================================= */

.kg-donation-booking {
    position: relative;

    display: flex;
    align-items: center;
    gap: 18px;

    margin: 18px 0;
    padding: 20px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #fff5f8,
            #fffdf2,
            #f2fbff
        );

    border: 2px solid rgba(255, 255, 255, 0.9);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.08);

    overflow: hidden;

    transition: 0.3s ease;
}


.kg-donation-booking:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}


/* HEART ICON */

.kg-donation-icon {
    min-width: 65px;
    width: 65px;
    height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    font-size: 32px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    animation: kgHeartBeat 2s infinite;
}


@keyframes kgHeartBeat {

    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.1);
    }

    20% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.1);
    }

    40% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }

}


/* CONTENT */

.kg-donation-content {
    flex: 1;
}


.kg-donation-badge {
    display: inline-block;

    padding: 5px 10px;

    border-radius: 20px;

    background: #ffe2ec;

    color: #d6336c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.8px;
}


.kg-donation-content h3 {

    margin: 7px 0 5px;

    color: #333;

    font-size: 21px;

}


.kg-donation-content p {

    margin: 0 0 15px;

    color: #666;

    font-size: 14px;

    line-height: 1.6;

}


/* BOOK BUTTON */

.kg-donation-btn {

    border: none;

    padding: 12px 20px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #ff6b9a,
            #ff8fab
        );

    color: white;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(255, 107, 154, 0.3);

    transition: 0.25s ease;
}


.kg-donation-btn:hover {

    transform: translateY(-2px) scale(1.03);

    box-shadow:
        0 10px 25px rgba(255, 107, 154, 0.4);

}


/* =========================================
   MODAL
========================================= */

.kg-donation-modal {

    display: none;

    position: fixed;

    z-index: 99999;

    inset: 0;

    padding: 25px;

    background:
        rgba(24, 35, 48, 0.72);

    backdrop-filter: blur(8px);

    align-items: center;

    justify-content: center;

}


/* ACTIVE */

.kg-donation-modal.active {

    display: flex;

}


/* MODAL BOX */

.kg-donation-modal-content {

    position: relative;

    width: min(1000px, 100%);

    max-height: 92vh;

    overflow-y: auto;

    border-radius: 30px;

    background: white;

    padding: 28px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.3);

    animation:
        kgModalPop 0.35s ease;

}


@keyframes kgModalPop {

    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* CLOSE BUTTON */

.kg-donation-close {

    position: absolute;

    top: 15px;
    right: 18px;

    width: 42px;
    height: 42px;

    border: none;

    border-radius: 50%;

    background: #f5f5f5;

    color: #555;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition: 0.2s ease;

}


.kg-donation-close:hover {

    background: #ff6b9a;

    color: white;

    transform: rotate(90deg);

}


/* =========================================
   BOOKING HEADER
========================================= */

.kg-booking-header {

    display: flex;

    align-items: center;

    gap: 15px;

    padding-right: 50px;

    margin-bottom: 18px;

}


.kg-calendar-icon {

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 18px;

    background: #e9f7ff;

    font-size: 30px;

}


.kg-small-title {

    color: #ff6b9a;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

}


.kg-booking-header h2 {

    margin: 4px 0 0;

    color: #222;

    font-size: 28px;

}


/* MESSAGE */

.kg-booking-message {

    padding: 15px 18px;

    margin-bottom: 20px;

    border-radius: 18px;

    background: #fff8e8;

    border-left: 5px solid #ffc857;

}


.kg-booking-message p {

    margin: 5px 0;

    color: #555;

    line-height: 1.6;

}


/* GOOGLE CALENDAR */

.kg-google-calendar {

    width: 100%;

    overflow: hidden;

    border-radius: 20px;

    border: 1px solid #e5e5e5;

    background: #fff;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.02);
}


.kg-google-calendar iframe {

    display: block;

    width: 100%;

    min-height: 650px;

    border: 0;
}


/* FOOTER */

.kg-booking-footer {

    margin-top: 18px;

}


.kg-booking-note {

    display: flex;

    gap: 10px;

    align-items: center;

    padding: 13px 16px;

    border-radius: 15px;

    background: #f7faff;

}


.kg-booking-note span {

    font-size: 20px;

}


.kg-booking-note p {

    margin: 0;

    color: #666;

    font-size: 13px;

    line-height: 1.5;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .kg-donation-booking {

        align-items: flex-start;

        padding: 16px;

    }


    .kg-donation-icon {

        min-width: 48px;

        width: 48px;

        height: 48px;

        font-size: 24px;

    }


    .kg-donation-content h3 {

        font-size: 18px;

    }


    .kg-donation-content p {

        font-size: 13px;

    }


    .kg-donation-btn {

        width: 100%;

    }


    .kg-donation-modal {

        padding: 10px;

    }


    .kg-donation-modal-content {

        padding: 18px;

        border-radius: 22px;

        max-height: 95vh;

    }


    .kg-booking-header h2 {

        font-size: 21px;

    }


    .kg-calendar-icon {

        width: 50px;

        height: 50px;

        font-size: 25px;

    }


    .kg-google-calendar iframe {

        min-height: 700px;

    }

}

/* HERO */

.hero{

padding-top:150px;

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

width:90%;

margin:auto;

gap:40px;

}

.hero-text{

flex:1;

}

.badge{

display:inline-block;

background:#E8F8FF;

padding:8px 18px;

border-radius:30px;

color:var(--blue);

font-weight:600;

margin-bottom:20px;

}

.hero h1{

font-family:'Fredoka';

font-size:68px;

line-height:1.05;

color:var(--dark);

margin-bottom:25px;

}

.hero h1 span{

color:var(--orange);

}

.hero p{

font-size:20px;

line-height:1.8;

margin-bottom:35px;

max-width:620px;

}

.buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.primary{

background:linear-gradient(45deg,#56CCF2,#2F80ED);

padding:18px 34px;

border-radius:50px;

text-decoration:none;

color:white;

font-weight:600;

box-shadow:0 12px 30px rgba(47,128,237,.3);

transition:.3s;

}

.secondary{

background:white;

padding:18px 34px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:var(--dark);

border:2px solid #eee;

transition:.3s;

}

.primary:hover,
.secondary:hover{

transform:translateY(-4px);

}

.hero-image{

flex:1;

text-align:center;

position:relative;

}

.hero-image img{

width:90%;

max-width:650px;

animation:float 4s ease-in-out infinite;

}

/* Floating Clouds */

.cloud{

position:absolute;

background:white;

border-radius:50px;

box-shadow:0 10px 20px rgba(0,0,0,.08);

animation:cloudMove 18s linear infinite;

}

.cloud:before{

content:"";

position:absolute;

width:50px;

height:50px;

background:white;

border-radius:50%;

top:-20px;

left:10px;

}

.cloud:after{

content:"";

position:absolute;

width:60px;

height:60px;

background:white;

border-radius:50%;

top:-30px;

right:15px;

}

.cloud1{

width:120px;
height:40px;

top:10%;

left:0;

}

.cloud2{

width:160px;
height:50px;

bottom:10%;

right:10%;

animation-duration:24s;

}

@keyframes cloudMove{

0%{

transform:translateX(-40px);

}

50%{

transform:translateX(40px);

}

100%{

transform:translateX(-40px);

}

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}



/* SECTION */

section{

padding:90px 5%;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-family:'Fredoka';

font-size:48px;

color:var(--dark);

margin-bottom:15px;

}

.section-title p{

max-width:700px;

margin:auto;

font-size:18px;

color:#666;

}

.about-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.card{

background:white;

border-radius:24px;

padding:35px;

box-shadow:0 20px 40px rgba(0,0,0,.08);

transition:.3s;

}

.card:hover{

transform:translateY(-10px);

}

.card i{

font-size:50px;

margin-bottom:20px;

color:var(--orange);

}

.card h3{

font-family:'Fredoka';

margin-bottom:15px;

color:var(--dark);

}

.card p{

line-height:1.8;

}

.stats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:60px;

}

.stat{

background:linear-gradient(135deg,#56CCF2,#2F80ED);

color:white;

padding:40px;

border-radius:25px;

text-align:center;

}

.stat h3{

font-family:'Fredoka';

font-size:48px;

margin-bottom:10px;

}

@media(max-width:900px){

.hero{

flex-direction:column-reverse;

text-align:center;

padding-top:130px;

}

.hero h1{

font-size:46px;

}

nav ul{

display:none;

}

}


/*----------Project-----------*/

.project-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
gap:35px;
margin-top:40px;
}

.project-card{
background:#fff;
border-radius:25px;
overflow:hidden;
box-shadow:0 20px 40px rgba(0,0,0,.08);
transition:.35s;
}

.project-card:hover{
transform:translateY(-10px);
}

.project-card img{
width:100%;
height:260px;
object-fit:cover;
}

.project-content{
padding:30px;
}

.project-tag{
display:inline-block;
background:#EAF8FF;
color:#2F80ED;
padding:8px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:15px;
}

.project-content h3{
font-family:'Fredoka';
font-size:32px;
margin-bottom:15px;
color:#274060;
}

.project-content p{
line-height:1.8;
margin-bottom:20px;
}

.progress{
width:100%;
height:14px;
background:#eee;
border-radius:30px;
overflow:hidden;
margin:20px 0;
}

.progress span{
display:block;
height:100%;
background:linear-gradient(90deg,#56CCF2,#6FCF97);
width:65%;
border-radius:30px;
}

.progress-info{
display:flex;
justify-content:space-between;
font-weight:600;
margin-bottom:20px;
}

.learn-btn{
display:inline-block;
background:#56CCF2;
color:white;
padding:14px 28px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}

.proposal-section{
margin-top:90px;
background:linear-gradient(135deg,#56CCF2,#2F80ED);
border-radius:35px;
padding:60px;
color:white;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
}

.proposal-section h2{
font-family:'Fredoka';
font-size:48px;
margin-bottom:20px;
}

.proposal-section p{
line-height:1.9;
margin-bottom:20px;
}

.cost-box{
background:rgba(255,255,255,.15);
padding:20px;
border-radius:20px;
margin-top:15px;
}

.cost-box h4{
margin-bottom:10px;
font-size:22px;
}

.cost-box ul{
padding-left:20px;
line-height:2;
}

.white-progress{
background:rgba(255,255,255,.3);
height:16px;
border-radius:30px;
margin-top:20px;
overflow:hidden;
}

.white-progress span{
display:block;
height:100%;
width:18%;
background:#FFD93D;
}

.proposal-image img{
width:100%;
border-radius:30px;
box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.prayer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:30px;
margin-top:50px;
}

.prayer-card{
background:white;
padding:35px;
border-radius:25px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
position:relative;
overflow:hidden;
}

.prayer-card:before{
content:"🙏";
position:absolute;
font-size:120px;
opacity:.08;
right:20px;
bottom:10px;
}

.prayer-card h3{
font-family:'Fredoka';
color:#274060;
margin-bottom:18px;
}

.prayer-card p{
line-height:2;
font-size:16px;
}

.prayer-card .verse{
margin-top:20px;
font-weight:bold;
color:#2F80ED;
}

@media(max-width:900px){

.proposal-section{
grid-template-columns:1fr;
padding:35px;
}

.proposal-section h2{
font-size:36px;
}

}
.staff-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:35px;
margin-top:50px;
}

.staff-card{
background:#fff;
border-radius:30px;
overflow:hidden;
box-shadow:0 20px 45px rgba(0,0,0,.08);
transition:.35s;
text-align:center;
}

.staff-card:hover{
transform:translateY(-10px);
}

.staff-card img{
width:100%;
height:380px;
object-fit:cover;
}

.staff-info{
padding:30px;
}

.staff-info h3{
font-family:'Fredoka';
font-size:30px;
color:#274060;
margin-bottom:10px;
}

.staff-role{
display:inline-block;
background:#EAF8FF;
padding:8px 18px;
border-radius:30px;
color:#2F80ED;
font-weight:600;
margin-bottom:20px;
}

.staff-info p{
line-height:1.8;
margin-bottom:20px;
}

.favorite-verse{
background:#FFF7DA;
padding:15px;
border-radius:15px;
font-style:italic;
}

/* =======================
Gallery
======================= */

.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-top:50px;
}

.gallery-grid img{
width:100%;
height:250px;
object-fit:cover;
border-radius:20px;
cursor:pointer;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.gallery-grid img:hover{
transform:scale(1.05);
}

/* =======================
Testimonials
======================= */

.testimonial-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:50px;
}

.testimonial{
background:white;
padding:35px;
border-radius:25px;
box-shadow:0 20px 40px rgba(0,0,0,.08);
position:relative;
}

.testimonial i{
font-size:45px;
color:#FFD93D;
margin-bottom:20px;
}

.testimonial p{
line-height:1.9;
margin-bottom:20px;
}

.testimonial h4{
color:#2F80ED;
}

/* =======================
Donate
======================= */

.donate-box{

margin-top:60px;

background:linear-gradient(135deg,#FFB84C,#FFD93D);

border-radius:35px;

padding:60px;

text-align:center;

}

.donate-box h2{

font-family:'Fredoka';

font-size:48px;

margin-bottom:20px;

color:#274060;

}

.donate-box p{

font-size:19px;

max-width:800px;

margin:auto;

line-height:1.9;

margin-bottom:35px;

}

.donation-methods{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:40px;

}

.method{

background:white;

padding:30px;

border-radius:25px;

box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.method img{

width:160px;

margin-bottom:20px;

}

.method h3{

font-family:'Fredoka';

margin-bottom:15px;

color:#274060;

}

.method p{

font-size:15px;

line-height:1.7;

}

/* ============================================
   ROOT VARIABLES
============================================ */

:root {

    --cream: #fffaf1;

    --red: #ff4757;

    --purple: #8f7cff;

    --purple-dark: #725be8;

    --yellow: #ffd166;

    --blue: #27a9e8;

    --green: #58c88d;

    --pink: #ef7591;

    --dark: #343a40;

    --gray: #6b7280;

    --input: #f8fafb;

    --white: #ffffff;

}


/* ============================================
   RESET
============================================ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Baloo 2", cursive;

    background: var(--cream);

    color: var(--dark);

    overflow-x: hidden;

}


/* ============================================
   CONTACT SECTION
============================================ */

.contact-section {

    position: relative;

    min-height: 100vh;

    padding: 0 20px 100px;

    overflow: hidden;

}


/* ============================================
   CONTAINER
============================================ */

.container {

    width: min(1100px, 100%);

    margin: auto;

}


/* ============================================
   HEADING
============================================ */

.contact-heading {

    text-align: center;

    padding-top: 0;

    margin-bottom: 42px;

}


.contact-heading h1 {

    font-family: "Fredoka", sans-serif;

    font-size: clamp(42px, 5vw, 62px);

    line-height: 1;

    color: var(--red);

    font-weight: 700;

}


.wave {

    display: inline-block;

    animation: waveHand 1.8s infinite;

    transform-origin: 70% 70%;

}


@keyframes waveHand {

    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(15deg);
    }

    30% {
        transform: rotate(-10deg);
    }

    45% {
        transform: rotate(15deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(0deg);
    }

}


.contact-heading p {

    font-size: 19px;

    color: #667085;

    margin-top: 10px;

}


/* ==========================================
   FEEDBACK & SUGGESTIONS
========================================== */

.feedback-section {
    width: 100%;
    max-width: 850px;
    margin: 70px auto 80px;
    padding: 0 20px;
    box-sizing: border-box;
}


/* Main card */

.feedback-card {
    position: relative;

    background: #fff;

    border: 4px solid #ffca55;
    border-radius: 28px;

    padding: 32px;

    box-shadow:
        0 10px 0 #f0a92d,
        0 20px 40px rgba(0, 0, 0, 0.10);

    overflow: hidden;

    animation: feedbackFloat 4s ease-in-out infinite;
}


/* Decorative background */

.feedback-card::before {
    content: "💛";

    position: absolute;

    top: 15px;
    right: 25px;

    font-size: 42px;

    opacity: .12;

    animation: feedbackSpin 2s linear infinite;
}

.feedback-card::after {
    content: "✨";

    position: absolute;

    bottom: 15px;
    left: 25px;

    font-size: 35px;

    opacity: .12;

    animation: sparkleFloat 2s ease-in-out infinite;
}


/* Header */

.feedback-header {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 25px;
}

.feedback-bubble {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff3a6;

    border-radius: 20px;

    font-size: 32px;

    box-shadow:
        0 5px 0 #e6c84d;

    animation: bulbBounce 2.5s ease-in-out infinite;
}

.feedback-small-title {
    font-size: 11px;
    font-weight: 900;

    letter-spacing: 1.5px;

    color: #ff6375;
}

.feedback-header h2 {
    margin: 3px 0;

    font-size: 28px;

    color: #333;
}

.feedback-header p {
    margin: 0;

    color: #687085;

    font-size: 14px;

    line-height: 1.5;
}


/* Labels */

.feedback-card label {
    display: block;

    margin: 16px 0 7px;

    font-weight: 800;

    color: #333;

    font-size: 14px;
}

.feedback-card label span {
    font-size: 11px;

    color: #999;

    font-weight: normal;
}


/* Inputs */

.feedback-card select,
.feedback-card input,
.feedback-card textarea {
    width: 100%;

    box-sizing: border-box;

    border: 3px solid #e1e7ec;

    border-radius: 15px;

    background: #f8fafb;

    padding: 13px 15px;

    font-family: inherit;

    font-size: 14px;

    color: #555;

    outline: none;

    transition: .25s ease;
}

.feedback-card select:focus,
.feedback-card input:focus,
.feedback-card textarea:focus {
    border-color: #9a84ff;

    background: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(154, 132, 255, .15);
}

.feedback-card textarea {
    resize: vertical;

    min-height: 120px;
}


/* Rating */

.feedback-rating {
    display: flex;

    gap: 10px;

    margin-top: 5px;
}

.feedback-rating button {
    width: 48px;
    height: 48px;

    border: 2px solid #e8e8e8;

    border-radius: 14px;

    background: #fff;

    font-size: 24px;

    cursor: pointer;

    transition: .1s ease;
}

.feedback-rating button:hover {
    transform: translateY(-5px) rotate(-3deg);

    box-shadow:
        0 7px 15px rgba(0,0,0,.12);
}

.feedback-rating button.selected {
    background: #fff0a8;

    border-color: #ffc94f;

    transform: translateY(-4px) scale(1.08);

    box-shadow:
        0 5px 0 #e6b83c;
}


/* Submit */

.feedback-submit {
    width: 100%;

    margin-top: 22px;

    padding: 15px 20px;

    border: none;

    border-radius: 16px;

    background: #ff4d61;

    color: white;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 5px 0 #d9344a;

    transition: .2s ease;
}

.feedback-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 0 #d9344a;

    filter: brightness(1.05);
}

.feedback-submit:active {
    transform: translateY(3px);

    box-shadow:
        0 2px 0 #d9344a;
}


/* Thank you */

.feedback-thankyou {
    text-align: center;

    margin-top: 16px;

    color: #777;

    font-size: 12px;
}


/* ==========================================
   ANIMATIONS
========================================== */

@keyframes feedbackFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes bulbBounce {

    0%, 100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(-5px);
    }
}

@keyframes feedbackSpin {

    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(10deg) scale(1.1);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes sparkleFloat {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

    .feedback-section {
        margin-top: 50px;
        padding: 0 14px;
    }

    .feedback-card {
        padding: 22px;

        border-radius: 22px;
    }

    .feedback-header {
        align-items: flex-start;
    }

    .feedback-bubble {
        width: 52px;
        height: 52px;

        font-size: 25px;
    }

    .feedback-header h2 {
        font-size: 23px;
    }

    .feedback-header p {
        font-size: 13px;
    }

    .feedback-rating button {
        width: 42px;
        height: 42px;

        font-size: 20px;
    }
}


/* ============================================
   MAP
============================================ */

.map-card {

    width: 100%;

    height: 500px;

    border: 5px solid var(--yellow);

    border-radius: 27px;

    overflow: hidden;

    box-shadow:
        0 12px 0 #e3a82b,
        0 20px 35px rgba(90,70,30,.10);

    background: white;

}


.map-card iframe {

    width: 100%;

    height: 100%;

    border: 0;

}


/* ============================================
   SOCIAL MEDIA
============================================ */

.social-section {

    display: flex;

    justify-content: center;

    gap: 17px;

    margin: 22px 0 25px;

}


.social {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: white;

    font-size: 21px;

    box-shadow:
        0 6px 0 rgba(0,0,0,.15);

    transition: .25s;

}


.social:hover {

    transform: translateY(-6px) rotate(-4deg);

}


.facebook {

    background: #4267a9;

}


.twitter {

    background: #1da1f2;

}


.linkedin {

    background: #0077b5;

}


.instagram {

    background: #e1306c;

}


.youtube {

    background: #ff0000;

}


/* ============================================
   CONTACT INFORMATION
============================================ */

.contact-info {

    background: rgba(255,255,255,.7);

    padding: 25px;

    border-radius: 25px;

}


.info-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 18px;

}


.info-item:last-child {

    margin-bottom: 0;

}


.info-icon {

    width: 45px;

    height: 45px;

    border-radius: 15px;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    flex-shrink: 0;

    box-shadow: 0 5px 15px rgba(0,0,0,.06);

}


.info-item strong {

    font-family: "Fredoka", sans-serif;

    color: var(--dark);

}


.info-item p {

    color: var(--gray);

    margin-top: 2px;

}


/* ============================================
   FLOATING BALLOONS
============================================ */

.balloon {

    position: fixed;

    width: 48px;

    height: 62px;

    border-radius: 50%;

    z-index: -1;

    opacity: .75;

    animation: balloonFloat 2s ease-in-out infinite;

}


.balloon::after {

    content: "";

    position: absolute;

    width: 1px;

    height: 38px;

    background: #bbb;

    left: 50%;

    top: 60px;

}


.balloon-blue {

    top: 20%;

    right: 20%;

    width: 45px;

    height: 55px;

    background: blue;

}


.balloon-pink {

    right: 9%;

    top: 52%;

    background: #ef91a4;

    animation-delay: 1.5s;

}


.balloon-yellow {

    bottom: 35%;

    left: 30%;

    background: rgb(240, 216, 0);

    animation-delay: 2s;

}


.balloon-orange {

    top: 30%;

    left: 7%;

    width: 40px;

    height: 45px;

    background: orange;

    opacity: .2;

}

.balloon-violet {

    top: 45%;
    
    left: 45%;

    width: 35px;

    height: 45px;

    background: rgb(247, 171, 247);

    opacity: 1;
}


@keyframes balloonFloat {

    0%,
    100% {

        transform: translateY(0) rotate(-3deg);

    }

    50% {

        transform: translateY(-18px) rotate(4deg);

    }

}



/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 900px) {

    .contact-wrapper {

        grid-template-columns: 1fr;

        max-width: 650px;

        margin: auto;

    }

    .contact-heading {

        margin-bottom: 30px;

    }

}


@media (max-width: 600px) {

    .contact-section {

        padding: 0 15px 70px;

    }

    .contact-form-card {

        padding: 23px;

        border-radius: 23px;

    }

    .contact-heading h1 {

        font-size: 42px;

    }

    .contact-heading p {

        font-size: 16px;

    }

    .map-card {

        height: 270px;

    }

    .social-section {

        gap: 10px;

    }

    .social {

        width: 46px;

        height: 46px;

    }

    .chat-box {

        right: 15px;

        bottom: 90px;

        width: calc(100% - 30px);

    }

    .balloon {

        display: none;

    }

}

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap');



.site-footer {
  position: relative;
  background: linear-gradient(135deg, #2d132c 0%, #801336 50%, #ee4540 100%);
  color: #ffffff;
  font-family: 'Fredoka', cursive, sans-serif;
  padding-top: 50px;
  overflow: hidden;
  box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
}

/* Rainbow Animated Top Border */
.footer-wave-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #ff4757, #ffa502, #2ed573, #1e90ff, #3742fa, #ed4c67);
  background-size: 300% 100%;
  animation: rainbowBorder 4s linear infinite;
}

@keyframes rainbowBorder {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* Floating Decorative Shapes */
.footer-bg-elements {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-shape {
  position: absolute;
  font-size: 2.2rem;
  opacity: 0.25;
  animation: floatShape 6s infinite ease-in-out;
}

.shape-1 { top: 15%; left: 5%; animation-delay: 0s; }
.shape-2 { top: 60%; left: 12%; animation-delay: 1.5s; }
.shape-3 { top: 20%; right: 8%; animation-delay: 3s; }
.shape-4 { top: 70%; right: 15%; animation-delay: 4.5s; }

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(15deg); }
}

/* Layout Container */
.footer-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 50px;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
  gap: 36px;
}

@media (max-width: 992px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .footer-container {
    grid-template-columns: 1fr;
  }
}

/* Columns General */
.footer-col h3.col-title {
  color: #ffeaa7;
  font-size: 1.35rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
}

/* Brand Column */
.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 18px;
  border-radius: 50px;
  backdrop-filter: blur(5px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 16px;
}

.brand-icon { font-size: 1.6rem; }
.brand-title {
  font-size: 1.5rem;
  margin: 0;
  color: #ffffff;
}

.brand-description {
  color: #f1f2f6;
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

/* Newsletter Input */
.newsletter-box h4 {
  color: #ffd32a;
  margin-bottom: 10px;
  font-size: 1rem;
}

.newsletter-input-wrap {
  display: flex;
  background: #ffffff;
  padding: 5px;
  border-radius: 30px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}

.newsletter-input-wrap input {
  flex: 1;
  border: none;
  padding: 10px 16px;
  border-radius: 30px;
  outline: none;
  font-family: inherit;
  font-size: 0.9rem;
}

.newsletter-input-wrap button {
  background: #ff4757;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.newsletter-input-wrap button:hover {
  background: #ff6b81;
  transform: scale(1.05);
}

/* Quick Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s, color 0.2s;
}

.link-bullet {
  transition: transform 0.2s;
}

.footer-links a:hover {
  color: #ffda79;
  transform: translateX(6px);
}

.footer-links a:hover .link-bullet {
  transform: translateX(4px);
}

/* Contact Info List */
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: #f1f2f6;
}

.info-icon {
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.15);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Social Cards Grid */
.social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.social-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.85rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.social-card.facebook { background: #3b5998; }
.social-card.instagram { background: #e1306c; }
.social-card.twitter { background: #1da1f2; }
.social-card.youtube { background: #ff0000; }

/* Footer Bottom Bar */
.footer-bottom {
  position: relative;
  z-index: 1;
  background: transparent;
  padding: 18px 24px;
  text-align: center;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.footer-bottom-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #ffeaa7;
  font-weight: 600;
}